$(function () {
    let soaring_list = $('.soaring_list');
    let newSong_list = $('.newSong_list');
    let original_list = $('.original_list');
    $.ajax({
        url: 'http://localhost:3000/toplist/detail',
        success: function (res) {
            // console.log(res.list);
            // 飙升榜
            let soaringList = res.list[0];
            let soaringListId = soaringList.id;
            // 新歌榜
            let newSongList = res.list[1];
            let newSongListId = newSongList.id;
            // 原创榜
            let originalList = res.list[2];
            let originalListId = originalList.id;



            sList(soaring_list, soaringList);
            sList(newSong_list, newSongList);
            sList(original_list, originalList);
            getListDetails('http://localhost:3000/playlist/detail', soaringListId, 'soaring_list');
            getListDetails('http://localhost:3000/playlist/detail', newSongListId, 'newSong_list');
            getListDetails('http://localhost:3000/playlist/detail', originalListId, 'original_list');

            function getListDetails(url, id, olName) {
                $.ajax({
                    url: url,
                    data: {
                        id: id
                    },
                    success: function (res) {
                        console.log(res);
                        // console.log(res.playlist.tracks);
                        let songPlayList = res.playlist
                        let song_list_details = $(`.${olName} dd ol`);
                        songPlayList.tracks.forEach((el, index) => {
                            if (index >= 10) return
                            if (index <= 2) {
                                song_list_details.append(`<li>
                                <span class="no no-top">${index + 1}</span>
                                <a href="../../views/songDetail.html?id=${res.playlist.trackIds[index].id}" class="f-thide" title="${el.name}">${el.name}</a>
                                <div class="oper">
                                    <a href="javascript:;" class="s-bg s-bg-11"></a>
                                    <a href="javascript:;" class="s-bg-12"></a>
                                    <a href="javascript:;" class="s-bg s-bg-13"></a>
                                </div>
                            </li>`)
                            } else {
                                song_list_details.append(`<li>
                                <span class="no">${index + 1}</span>
                                <a href="../../views/songDetail.html?id=${res.playlist.trackIds[index].id}" class="f-thide" title="${el.name}">${el.name}</a>
                                <div class="oper">
                                    <a href="javascript:;" class="s-bg s-bg-11"></a>
                                    <a href="javascript:;" class="s-bg-12"></a>
                                    <a href="javascript:;" class="s-bg s-bg-13"></a>
                                </div>
                            </li>`)
                            }
                        });
                    }
                })
            }

            function sList(listName, dataSList) {
                listName.html('');
                listName.append(`<dt>
                <div class="cver">
                    <img src="${dataSList.coverImgUrl}" alt="">
                    <a href="/discover/toplist?id=${dataSList.id}" class="msk" title="${dataSList.name}"></a>
                </div>
                <div class="tit">
                    <a href="/discover/toplist?id=${dataSList.id}" title="${dataSList.name}">
                        <h3 class="f-fs1 f-thide">${dataSList.name}</h3>
                    </a>
                    <div class="blk_btn">
                        <a href="javascript:;" class="s-bg s-play" title="播放">播放</a>
                        <a href="javascript:;" class="s-bg s-collection" title="收藏">收藏</a>
                    </div>
                </div>
            </dt>
            <dd>
                <ol>
                    
                </ol>
                <div class="checkMore">
                    <a href="javascript:;">查看全部></a>
                </div>
            </dd>`);
            }

        }
    })
})